<template>
  <div class="teacher-admin">
    <!-- 横幅区域 -->
    <div class="banner">
      <div class="banner-content">
        <div class="banner-title">Web Design</div>
        <h1 class="banner-heading">智能化在线教学支持服务平台大数据分析系统</h1>
        <div class="banner-subtitle">Design</div>
        <button class="banner-button">→</button>
      </div>
      <div class="banner-image"></div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <div class="section-container">
        <!-- 最新资讯 -->
        <div class="news-section">
          <div class="section-header">
            <div class="section-title">最新资讯</div>
            <div class="section-subtitle">News</div>
          </div>

          <div class="news-list">
            <div v-for="(news, index) in newsList" :key="news.id" class="news-item">
              <div class="news-number">{{ index + 1 }}</div>
              <div class="news-date">{{ news.date }}</div>
              <div class="news-title">{{ news.title }}</div>
            </div>
          </div>
        </div>

        <!-- 最新通知 -->
        <div class="notice-section">
          <div class="section-header">
            <div class="section-title">最新通知</div>
            <div class="section-subtitle">Notice</div>
          </div>

          <div class="notice-list">
            <div v-for="(notice, index) in noticeList" :key="notice.id" class="notice-item">
              <div class="news-number">{{ index + 1 }}</div>
              <div class="news-date">{{ notice.date }}</div>
              <div class="news-title">{{ notice.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

// 最新资讯列表
const newsList = ref([
  { id: 1, date: '4/25', title: '"四链"融合培育高素质技能人才' },
  { id: 2, date: '2/28', title: '《向上一堂课》20200228 高中语文阅读专题...' },
  { id: 3, date: '4/2', title: '考点·常用逻辑用语（核心考点讲与练）（一）' }
]);

// 最新通知列表
const noticeList = ref([
  { id: 1, date: '4/23', title: '【信雅讲坛】（第52期）高大伦到校分享...' },
  { id: 2, date: '3/28', title: '学院党委组织开展警示教育' },
  { id: 3, date: '3/25', title: '3+3与"3+1+2"选科模式并存...' },
  { id: 4, date: '4/23', title: '【信雅讲坛】（第52期）高大伦到校分享...' },
  { id: 5, date: '3/28', title: '学院党委组织开展警示教育' },
  { id: 6, date: '3/25', title: '3+3与"3+1+2"选科模式并存...' }
]);

export default {
  setup() {
    return {
      newsList,
      noticeList,
    };
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
}

/* 导航栏样式 */
.nav-bar {
  background-color: #1a2640;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.logo img {
  margin-right: 10px;
}

.logo span {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-right: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  background-color: rgba(255, 255, 255, 0.1);
}

.search-bar {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.search-input {
  width: 250px;
  height: 36px;
  border-radius: 4px 0 0 4px;
  border: none;
  padding: 0 15px;
  font-size: 14px;
}

.search-button {
  width: 40px;
  height: 36px;
  background-color: #1976d2;
  border: none;
  border-radius: 0 4px 4px 0;
  color: white;
  cursor: pointer;
}

.user-area {
  display: flex;
  align-items: center;
}

.user-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-links a {
  color: #fff;
  text-decoration: none;
  margin-left: 10px;
  font-size: 14px;
}

/* 横幅区域 */
.banner {
  background-color: #1e88e5;
  color: white;
  padding: 40px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.banner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('');
  opacity: 0.1;
  z-index: 0;
}

.banner-content {
  position: relative;
  z-index: 1;
  width: 60%;
}

.banner-title {
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 15px;
}

.banner-heading {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}

.banner-subtitle {
  font-size: 18px;
  margin-bottom: 20px;
}

.banner-button {
  background-color: #ffc107;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.banner-image {
  position: relative;
  z-index: 1;
  width: 40%;
  height: 300px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 内容区域 */
.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.news-section,
.notice-section {
  width: 48%;
}

.section-header {
  display: flex;
  margin-bottom: 30px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e88e5;
  margin-right: 20px;
}

.section-subtitle {
  font-size: 20px;
  color: #777;
}

.news-list,
.notice-list {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.news-item,
.notice-item {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child,
.notice-item:last-child {
  border-bottom: none;
}

.news-number {
  font-size: 18px;
  color: #999;
  width: 30px;
  text-align: center;
}

.news-date {
  font-size: 14px;
  color: #999;
}

.news-title {
  font-size: 14px;
  flex-grow: 1;
  margin-left: 10px;
}

/* 页脚 */
.footer {
  background-color: #1a2640;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-item {
  margin: 0 20px;
}

.footer-copyright {
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}
</style>

